<template>
  <div>

    <!--  头部导航栏  -->
    <div>
      <el-menu
          :default-active="this.$route.path"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          router
          background-color="#fff"
          text-color="#333"
          active-text-color="#0084ff"
          style="flex:1"
      >
        <el-menu-item style="padding:0 10px" v-for="(item, i) in navList" :key="i" :index="item.name">
          <template slot="title">
            <span> {{ item.navItem }}</span>
          </template>
        </el-menu-item>
      </el-menu>
    </div>

    <!--  添加誓言按钮  -->
    <div style="margin-top: 50px;">
      <div style="text-align: center;padding-bottom: 20px">
        <el-button @click="showAdd()" type="primary" style="margin-left: 20px" >添加誓言</el-button>
      </div>
    </div>

    <!--  誓言列表  -->
    <div style="width: 88%;margin: 0 auto" class="tableCenter">
      <el-table
          ref="multipleTable"
          :data="datalist.slice((currentPage1-1)*pageSize, currentPage1*pageSize)"
          tooltip-effect="dark"
          class="top2">
        <el-table-column
            type="index"
            label="序号"
            width="200">
        </el-table-column>
        <el-table-column
            prop="from"
            label="誓言人"
            width="300">
        </el-table-column>
        <el-table-column
            prop="to"
            label="誓言对象"
            width="300">
        </el-table-column>

        <el-table-column
            prop="title"
            label="誓言标题"
            width="300">
        </el-table-column>

        <el-table-column
            prop="content"
            label="誓言摘要"
            width="300">
        </el-table-column>

        <el-table-column
            fixed="right"
            label="操作"
            width="180">
          <template slot-scope="scope">
            <div>
              <el-row>
                <el-col :span="16">
                  <el-button class="el-icon-edit" type="text" size="lager" @click="showDetail(scope.row)">查看誓言详情</el-button>
                </el-col>
              </el-row>
            </div>
          </template>
        </el-table-column>

      </el-table>

      <!--   分页   -->
      <div class="paginationClass" style="margin-left: -30%">
        <el-pagination
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1" :current-page="currentPage1"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="datalist.length">
        </el-pagination>
      </div>
    </div>

    <!--  添加誓言的模态框  -->
    <div class="tableCenter">
      <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="6rem"
                 :close-on-press-escape="false">
        <div>
          <el-form :model="form" label-position="center" label-width="90px" class="edit_form">

            <el-form-item label="誓言对象" prop="">
              <el-input v-model="form.to" placeholder="请输入誓言对象" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="誓言标题" prop="">
              <el-input v-model="form.title" placeholder="请输入誓言标题" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="誓言内容" prop="">
              <el-input type="textarea" :rows="3"  v-model="form.content" placeholder="请输入誓言内容" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div slot="footer" class="el-dialog--center">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="add()">确定</el-button>
        </div>
      </el-dialog>
    </div>

    <!--  展示誓言详情的模态框  -->
    <div class="tableCenter">
      <el-dialog :title="dialogTitle2" width="6rem" :visible.sync="dialogFormVisible2" :close-on-click-modal="false"
                 :close-on-press-escape="false">
        <div>
          <el-form :model="form" label-position="center" label-width="90px" class="edit_form">

            <el-form-item label="誓言人" prop="from">
              <el-input v-model="form.from" :disabled="true" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="誓言对象" prop="to">
              <el-input v-model="form.to" :disabled="true" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="誓言标题" prop="title">
              <el-input v-model="form.title" :disabled="true" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="誓言内容" prop="content">
              <el-input type="textarea" :rows="3"  v-model="form.content" :disabled="true" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div slot="footer" class="el-dialog--center">
          <el-button @click="dialogFormVisible2 = false">关闭</el-button>
        </div>
      </el-dialog>
    </div>

  </div>
</template>

<script>
export default {
  name: "index",
  data(){
    return{
      // 导航栏数据
      navList:[
        {name:'/index', navItem:'系统首页'},
        {name:'/advice',navItem:'意见反馈'},
        {name:'/login', navItem:'系统登录'},
        {name:'/register',navItem:'系统注册'}
      ],

      // 列表数据
      datalist:[{
        from: "xxx",
        to: "xxx",
        title: "love",
        content: "I love you!",

      }],
      dialogTitle: "添加誓言",
      dialogFormVisible: false,
      dialogTitle2: "誓言详情",
      dialogFormVisible2: false,

      // 实现分页
      total1: 0,
      currentPage1: 1,
      pageSize: 10,

      // 提交誓言的表单数据
      form: {
        to: '',
        title: '',
        content: ''
      },


    }
  },

  methods: {
    handleSelect(key, keyPath) {
    },

    // 分页
    handleSizeChange1: function (pageSize) { // 每页条数切换
      this.pageSize = pageSize
      this.currentPage1 = 1;
    },

    handleCurrentChange1: function (currentPage) {//页码切换
      this.currentPage1 = currentPage;
    },

    // 展示添加誓言的模态框
    showAdd(){
      // 打开模态框
      this.dialogFormVisible = true;
    },

    // 实现添加誓言
    add(){
      // 关闭模态框
      this.dialogFormVisible = false;
    },

    // 展示誓言, 这里简化为模态框展示
    showDetail(row){
      this.form = row
      this.dialogFormVisible2 = true;
    },

  },

}
</script>

<style scoped>
.tableCenter{
  text-align: center;
  margin-top: 50px;
}
.edit_form {
  width: 4.5rem;
  margin: 1.5rem auto;
}
</style>
<style>
.el-dialog__body {
  margin-top: -1rem !important;
}
</style>